<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Web Telemetry Video Monitor</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <h1>Web Telemetry Debugger</h1>
    <hr>
    <br>
    <h2> 实时视频流</h2>
    <h3> 阈值图像 </h3>
    <img class="img-responsive" src="/video_feed/threshold" alt="阈值处理合成图像">
    <!--原始图像，这里为了对比没有用变量，直接设置成为src-->
    <!--但是由于原始为@app.route('/video_feed/<name>')，因此其name对应src-->
    <h3> 定位 </h3>
    <img class="img-responsive" src="/video_feed/localization" alt="定位可视化图像">
    <br>
    <hr>
    <br>

    <h2> 图像参数调节 </h2>

    <ul>
        {% for name, param in img_params_info %}
        <li>
          <span> {{ name }} </span>
          <input id="range_{{ name }}" , type="range" ,
                 min="{{ param.min_value }}" ,
                 max="{{ param.max_value }}" ,
                 step="{{ param.step_value }}" ,
                 value="{{ param.current_value }}" ,
                 onchange="range_onchange('{{ name }}')">
          <span id="value_{{ name }}"> {{ param.current_value }} </span>
        </li>
        {% endfor %}
    </ul>

    <h2> 任务切换 </h2>
    <ul>
        <li>
            <button id="button_stop" type="button" onclick="button_onclick('stop')">stop</button>
        </li>
        
        <li>
            <button id="button_cross" type="button" onclick="button_onclick('cross')">cross</button>
        </li>
    </ul>
    <hr>
    <p> copyright 2021 HITCRT VISION</p>
    <script type="text/javascript">
        function range_onchange(name) {
            var value = document.getElementById("range_" + name).value;
            document.getElementById("value_" + name).innerHTML = value;
            var xml = new XMLHttpRequest();
            xml.open("get", "/video/setting/" + name + "?current_value=" + value);
            xml.send();
        }
    
        function button_onclick(name) {
            var xml = new XMLHttpRequest();
            xml.open("get", "/video/button/" + name);
            xml.send();
        }
    
        function checkbox_onclick(name) {
            var checked = document.getElementById("checkbox_" + name).checked;
            var xml = new XMLHttpRequest();
            xml.open("get", "/video/checkbox/" + name + "?checked=" + checked);
            xml.send();
        }
    
    </script>
</body>

</html>